<template>
  <div >
    <city-header></city-header>
    <city-search :cities="cities"></city-search>
    <city-list
      :cities="cities"
      :hot="hotCities"
      :letter="letter"
    ></city-list>
    <city-alphabet
      :cities="cities"
      @change="handleLetterChange"
    ></city-alphabet>
  </div>
</template>

<script>
  import CityHeader from '@/components/city/Header'
  import CitySearch from '@/components/city/Search'
  import CityList from '@/components/city/List'
  import CityAlphabet from '@/components/city/Alphabet'
  export default {
    name: 'City',
    components: {
      CityHeader,
      CitySearch,
      CityList,
      CityAlphabet
    },
    data () {
      return {
        cities: {},
        hotCities: [],
        letter: ''
      }
    },
    async asyncData (context) {
      //请求后台数据 这里注意了参数必须使用config配置项 如果直接拼接字符串会有bug
      const { data } = await context.app.$axios.get("/app/api/city.json")
      return  {
        cities:data.data.cities, //得到城市列表
        hotCities:data.data.hotCities, //得到热门城市
      }
    },
     methods: {
      handleLetterChange (letter) {
        this.letter = letter
      }
    },

  }
</script>

<style lang="stylus" scoped>

</style>
